<template>
  <div class="elcall">
    
    <!-- 1. 二维码 title -->
    <el-row class="heard colorT">
      <!-- 1.1 二维码 -->
      <el-col :span="2">
        <img
          src="https://img.alicdn.com/imgextra/i4/6000000003679/O1CN015mS8hG1d31pMbAmBq_!!6000000003679-2-ampmedia.png"
          alt=""
          width="75px"
          height="75px"
          style="margin-left: 5px"
        />
      </el-col>
      <el-col :span="3">
        <div class="special">{{tranSpecial(invoiceHead.tdyslxdm)}}</div>
      </el-col>
      <!-- 1.2 发票title -->
      <el-col :span="12" class="title">
        <div style="width: 70%;">
          <h3>
            {{ invoiceHead.title }}
            <i></i>
          </h3>
          <div class="chapter"> 
            <p id="text3" style="position:absolute;top:-54px;z-index: 999;font-weight:bold" >全  国  统  一  发  票  监  制  章</p>
            <p id="text4" style="position:absolute;top:10px;;z-index: 999;font-weight:bold;" >省 税 务 局</p>
            <div  class="ellipse" >
              <div class="ellipse2" style=" display:flex;align-items:center;justify-content:center;margin:auto;margin-top:2px"> 
                国家税务总局
              </div>
            </div> 
          </div>          
        </div>         
      </el-col>
      <!-- 1.3 发票号码 -->
      <el-col :span="6">
        <div  class="linecenter">
          <div class="item">
            <h5>
              发票号码:
              <i></i>
            </h5>
            <span>{{ invoiceHead.goldtaxNum }}</span>
          </div>
          <div class="item ptop">
            <h5>
              开票日期:
              <i></i>
            </h5>
            <span>{{ invoiceHead.billGdate }}</span>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 方框部分 -->
    <div class="bigbox">
      <!-- 2. 购买方销方信息 -->
      <el-row class="borderB">
        <!-- 2.1 购方 -->
        <el-col :span="12" style="display: flex;">
          <div class="colorT borderRight"
            style="
              text-align: center;
              font-size: 15px;
              padding: 0px 5px;
            "
          >
            <div  style="margin-top: 10px">购</div>
            <div>买</div>
            <div>方</div>
            <div>信</div>
            <div  style="margin-bottom: 10px">息</div>
          </div>
          <div class="pleft">
            <div style="padding: 25px 0">
              <div class="item">
                <h5 style="width: 40px">
                  名称:
                  <i></i>
                </h5>
                <span>{{ invoiceHead.custName }}</span>
              </div>
              <div class="item">
                <h5 style="width: 220px">
                  统一社会信用代码 / 纳税人识别号:
                  <i></i>
                </h5>
                <span>{{ invoiceHead.custTaxcode }}</span>
              </div>
            </div>
          </div>
        </el-col>
        <!-- 销方 -->
        <el-col :span="12"  style="display: flex;">
          <div class="colorT borderRight borderLeft"
            style="
              text-align: center;
              font-size: 15px;
              padding: 0px 5px;
            "
          >
            <div style="margin-top: 10px">销</div>
            <div>售</div>
            <div>方</div>
            <div>信</div>
            <div style="margin-bottom: 10px">息</div>
          </div>
          <div class="pleft">
            <div style="padding: 25px 0">
              <div class="item">
                <h5 style="width: 40px">
                  名称:
                  <i></i>
                </h5>
                <span>{{ invoiceHead.orgName }}</span>
              </div>
              <div class="item">
                <h5 style="width: 220px">
                  统一社会信用代码 / 纳税人识别号:
                  <i></i>
                </h5>
                <span>{{ invoiceHead.orgTaxcode }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 3. 项目明细 金额 -->
      <el-row class="borderB"> 
        <el-col :span="24" >
          <!-- 3.1 名称 -->
          <el-row class="box colorT ptop" style="" >
            <el-col :span="5" class="">项目名称</el-col>
            <el-col :span="4" class="">规格型号</el-col>
            <el-col :span="1" class="">单位</el-col>
            <el-col :span="2" class="">数量</el-col>
            <el-col :span="3" class="">单价</el-col> 
            <el-col :span="3" class="">金额</el-col> 
            <el-col :span="3" class="">税率/征收率</el-col> 
            <el-col :span="3"  style="">税额</el-col> 
          </el-row>
          <!-- 3.2 明细 -->
          <el-row v-for="(item,index) in invoiceHead.invoiceSplitLines"    :key="index" class="box">
            <el-col :span="5" class=" every" style="text-align:left;"><div>{{item.itemName}}</div></el-col>
            <el-col :span="4" class=" every" style="text-align:left;"><div>{{item.itemSpec}}</div></el-col> 
            <el-col :span="1" class=" every"><div>{{item.unitName}}</div></el-col>
            <el-col :span="2" class=" every" style="text-align:right;"><div>{{item.quantity==0 ? '':item.quantity}}</div></el-col>
            <el-col :span="3" class=" every" style="text-align:right;"><div>{{item.zpriceWsj==0 ? '':item.zpriceWsj}}</div></el-col> 
            <el-col :span="3" class=" every" style="text-align:right;"><div>{{item.zamountWsj}}</div></el-col>  
            <el-col :span="3" class=" every" style="text-align:right;"><div>
              <span v-if="item.taxRate>0.0111">
                {{item.taxRate*100}}%
              </span>
              <span v-if="item.taxRate<=0.0111">{{item.taxZero}}</span>
              </div></el-col> 
            <el-col  :span="3" class="every" style="text-align:right;"><div>{{item.zamountSej}}</div></el-col> 
          </el-row>
          <!-- 3.3 合计 -->
          <el-row class="box colorT ptop borderB" style="margin-top: 10px">
            <el-col :span="6">
              <span style="letter-spacing: 50px;">
                合计<i></i>
              </span>
            </el-col>
            <el-col :span="9" class=""></el-col> 
            <el-col :span="3" class="" style="color: rgba(0, 0, 0, 0.8); text-align:right;">¥{{invoiceHead.zamountWsj}}</el-col> 
            <el-col :span="3" class=""></el-col> 
            <el-col :span="3" style="color: rgba(0, 0, 0, 0.8); text-align:right; padding: 3px 5px;">¥{{invoiceHead.zamountSej}}</el-col> 
          </el-row>
          <!-- 3.4 价税合计 -->
          <el-row class="box " style="height:30px ;line-height:30px;">
            <el-col :span="6" class="colorT borderRight">
              <span >价税合计(大写) </span>
            </el-col>
            <el-col :span="11" style="text-align:left;padding-left:10px;display:flex;align-content:center"> 
              <i style="font-weight:bold;font-size:20px" class="iconfont icon-iconset0288"></i>
              {{ invoiceHead.zamountHsj|toChies}}
            </el-col> 
            <el-col class="colorT" :span="6" style="text-align:left;">
              (小写)
              <span class="pleft" style="color: rgba(0, 0, 0, 0.8);">
                ¥{{invoiceHead.zamountHsj}}
              </span>
            </el-col> 
          </el-row>
        </el-col> 
      </el-row> 
      <!-- 4 .备注 -->
      <el-row>
        <el-col :span="24" style="display: flex;">
          <div class="borderRight colorT"
            style="
              text-align: center;
              font-size: 15px;
              padding: 0px 3px;
            "
          >
            <p style="margin-top: 25px">备</p> 
            <p>注</p> 
          </div>
          <div class="right" style="padding:5px 3px;">
            <div v-if="invoiceHead.tdyslxdm">
              <!-- 05 06 不动产 -->
              <p v-if="invoiceHead.tdyslxdm=='05'||invoiceHead.tdyslxdm=='06'" style="margin: 5px 0">
                不动产地址：{{ invoiceHead.bdcdz }}
                <span style="margin-left:30px">租赁期起止：{{ invoiceHead.zlrqq }} {{ invoiceHead.zlrqz }}</span>
                <span style="margin-left:30px">跨地(市) 标志：{{ invoiceHead.kdsbz=='Y'?'是':'否' }}</span>
              </p>
              <!-- 03 建筑服务 -->
              <p v-if="invoiceHead.tdyslxdm=='03'" style="margin: 5px 0">
                土地增值税项目编号：{{ invoiceHead.tdzzsxmbh }}
                <span style="margin-left:30px">跨地(市) 标志：{{ invoiceHead.kdsbz=='Y'?'是':'否' }}</span>
              </p>
            </div>

            <p v-if="invoiceHead.gfBank=='1'" style="margin: 5px 0">
              购方开户银行：{{ invoiceHead.custBankname }}
              <span style="margin-left:30px">银行账号：{{ invoiceHead.custBankaccount }}</span>
            </p>
            <p v-if="invoiceHead.xfBank=='1'" style="margin: 5px 0">
              销方开户银行：{{ invoiceHead.orgBankname }}  
              <span style="margin-left:30px">银行账号：{{ invoiceHead.orgBankaccount }}</span>
            </p>

            <div v-if="(transRemark(invoiceHead.billRemark) instanceof Array)">
              <div v-for="(item,index) in transRemark(invoiceHead.billRemark)" :key="index">
                {{item}}
                <br/>
              </div>
            </div>
            <div v-if="!(transRemark(invoiceHead.billRemark) instanceof Array)">
              {{invoiceHead.billRemark}}
            </div>

            <p style="margin: 5px 0">
              <span v-if="invoiceHead.payeeName">收款人:{{ invoiceHead.payeeName }}</span> &ensp;
              <span v-if="invoiceHead.checkName">复核人:{{ invoiceHead.checkName }}</span>
            </p>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 5. 开票人 -->
    <el-row style="margin: 10px 20px">
      <el-col :span="6">
        <div class="item">
          <h5>
            开票人:
          </h5>
          <span>{{ invoiceHead.userName }}</span>
        </div>  
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {tranSpecial} from '@/utils'
  export default {
    mounted(){
      $("#text1").show().arctext({ radius:120 })
      $("#text2").show().arctext({ radius:120, dir:-1 })
      $("#text3").show().arctext({ radius:120 })
      $("#text4").show().arctext({ radius:120, dir:-1 })
    },
    filters: { //局部过滤器
      toChies: function(amount) { //形参
        // 汉字的数字
        const cnNums = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
        // 基本单位
        const cnIntRadice = ["", "拾", "佰", "仟"];
        // 对应整数部分扩展单位
        const cnIntUnits = ["", "万", "亿", "兆"];
        // 对应小数部分单位
        const cnDecUnits = ["角", "分"];
        // 整数金额时后面跟的字符
        const cnInteger = "整";
        // 整型完以后的单位
        const cnIntLast = "元";
        // 最大处理的数字
        const maxNum = 9999999999999999.99;
        // 金额整数部分
        let integerNum;
        // 金额小数部分
        let decimalNum;
        // 输出的中文金额字符串
        let chineseStr = "";
        // 分离金额后用的数组，预定义
        let parts;
        if (amount === "") {
          return "";
        }
        amount = parseFloat(amount);
        if (amount >= maxNum) {
          // 超出最大处理数字
          return "";
        }
        if (amount === 0) {
          chineseStr = cnNums[0] + cnIntLast + cnInteger;
          return chineseStr;
        }
        // 转换为字符串
        amount = amount.toString();
        if (amount.indexOf(".") === -1) { // 1. 不是小数
          integerNum = amount;
          decimalNum = "";
        } else { // 2. 是小数
          parts = amount.split(".");
          integerNum = parts[0];
          decimalNum = parts[1].substr(0, 4);
        }
        // 获取整型部分转换
        if (parseInt(integerNum, 10) > 0) { // 1.正数
          let zeroCount = 0;
          const IntLen = integerNum.length;
          for (let i = 0; i < IntLen; i++) {
            const n = integerNum.substr(i, 1);
            const p = IntLen - i - 1;
            const q = p / 4;
            const m = p % 4;
            if (n === "0") {
                zeroCount++;
            } else {
              if (zeroCount > 0) {
                  chineseStr += cnNums[0];
              }
              // 归零
              zeroCount = 0;
              chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
            }
            if (m === 0 && zeroCount < 4) {
              chineseStr += cnIntUnits[q];
            }
          }
          console.log(chineseStr, cnIntLast, '1正数-------------');
          chineseStr += cnIntLast;
        } else{ // 2. 负数
          integerNum = Math.abs(integerNum).toString() // 负数转正数
          let zeroCount = 0;
          const IntLen = integerNum.length;
          for (let i = 0; i < IntLen; i++) {
            const n = integerNum.substr(i, 1);
            const p = IntLen - i - 1;
            const q = p / 4;
            const m = p % 4;
            if (n === "0") {
                zeroCount++;
            } else {
              if (zeroCount > 0) {
                  chineseStr += cnNums[0];
              }
              // 归零
              zeroCount = 0;
              chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
            }
            if (m === 0 && zeroCount < 4) {
              chineseStr += cnIntUnits[q];
            }
          }
          console.log(chineseStr, cnIntLast, '2负数-------------');
          chineseStr = '（负数）' + chineseStr + cnIntLast;
        }
        // 小数部分
        if (decimalNum !== "") {
          const decLen = decimalNum.length;
          for (let i = 0; i < decLen; i++) {
            const n = decimalNum.substr(i, 1);
            if (n !== "0") {
                chineseStr += cnNums[Number(n)] + cnDecUnits[i];
            }
          }
        }
        if (chineseStr === "") {
          chineseStr += cnNums[0] + cnIntLast + cnInteger;
        } else if (decimalNum === "") {
          chineseStr += cnInteger;
        }
        return chineseStr;
      }
    },
    
    props: {
      invoiceHead: {
        type: Object,
        default: null,
      },
    },
    methods: {
      tranSpecial(val) {
        return tranSpecial(val)
      },
      transRemark(val) {
        console.log(val, '备注')
        if(val){
          console.log(val.indexOf('\n')!=-1, '前面是true再看后面：',val.split('\n') )
          if(val.indexOf('\n')!=-1){
            let arr = val.split('\n')
            return arr
          } else {
            return val
          }
        } 
      }
    }
  }
</script>

<style scoped lang="scss">
  .elcall{
    padding: 0 10px;
  }
  // 1. 二维码 title
  .heard{
    display: flex; 
    justify-content: space-between;
    margin-bottom: 15px;
    .title {
      display: flex; 
      justify-content: center;
      h3 {
        width: 120%;
        margin: 0 -30px;
        height: 40px;
        font-size: 30px;
        font-weight: 500;
        text-align: justify;
      }
      
      i {
        display: inline-block;
        padding-left: 100%;
        width: 100%;
      }
      .chapter {
        position: relative;
        display:flex;
        align-items:center;
        justify-content:center;
        width: 100%;
        height: 2.5px;
        border-top: 2px solid #800000;
        border-bottom: 2px solid #800000;
        margin-top: 0;
        color:rgba(255,2,0,1);

        .ellipse{
          width: 180px;
          height: 90px;
          margin: 50px;
          border :5px solid #FF0200;
          border-radius: 50% / 50%;
          color:#FF0200;
          margin-top:50px;
          .ellipse2{
            width: 172px;
            height: 82px;
            margin: 50px;
            border :2px solid #FF0200;
            border-radius: 50% / 50%;
            color:rgba(255,2,0,0.6); 
            font-weight:bold;
          }
        }
      }
    }
  }
  // 2. 特殊信息
  .special{
    height: 75px;
    line-height: 75px;
    color: rgba(0, 0, 0, 0.8);
    margin-left: 5px;
  }

  // 
  .bigbox{
    border: 2px solid #800000;
  }
  .borderLeft{ 
    border-left: 2px solid #800000;
  }
  .borderRight{ 
    border-right: 2px solid #800000;
  }
  .borderB{ 
    border-bottom: 2px solid #800000;
  }
  
  .pleft{
    padding-left: 2px
  }

  .ptop{
    padding-top: 8px;
  }

  .colorT{
    color: #800000;
  }
  .item {
    display: flex;
    height: 20px;
    margin-top: 5px;
    h5 {
      margin: 0;
      margin-right: 5px;
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      color: #800000;
      // i {
      //   display: inline-block;
      //   padding-left: 100%;
      //   width: 100%;
      // }
    }
    span {
      height: 20px;
      line-height: 20px;
      color: rgba(0, 0, 0, 0.8);
    }
  }

  .box{
    display: flex;
    text-align: center;
  
    .every{
      display: inline-block;  
      padding: 3px 5px;
    }
  }
</style>
